<template>
    <!-- 活动管理下的:活动审批 -->
    <div>
        <el-form :inline="true" :model="formInline" style="margin: 0;">
            <el-form-item>
                <el-col :span="11.5">
                    <el-date-picker 
                        type="date" 
                        placeholder="活动申请时间(开始)" 
                        v-model="formInline.start_time" 
                        style="width: 100%;"
                        >
                    </el-date-picker>
                </el-col>
                <el-col class="line" :span="0.5">-</el-col>
                <el-col :span="11.5">
                    <el-date-picker 
                        type="date" 
                        placeholder="活动申请时间(结束,填写时最好提前一天)" 
                        v-model="formInline.end_time" 
                        style="width: 100%;"
                        >
                    </el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-input
                    placeholder="活动名(可以模糊查询)"
                    v-model="formInline.active_name"
                    clearable>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input
                    type="number"
                    placeholder="申请人ID"
                    v-model.number="formInline.applicant"
                    clearable>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSelect">查 询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="onRest">重 置</el-button>
            </el-form-item>
        </el-form>

        <el-divider></el-divider>

        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column type="expand">
            <template slot-scope="props">
                <el-form :inline="true">
                    <el-form-item>
                        <span style="margin-left: 30px;">开始时间:</span>
                        <span style="margin-left: 10px;color: #409EFF;">{{ props.row.start_time }}</span>
                    </el-form-item>
                    <el-form-item>
                        <span style="margin-left: 30px;">结束时间:</span>
                        <span style="margin-left: 10px;color: #F56C6C;">{{ props.row.end_time }}</span>
                    </el-form-item>
                </el-form>
                <el-form>
                    <el-form-item label="">
                        <div style="padding-left: 30px;">活动内容:</div>
                        <el-input type="textarea"
                             v-model="props.row.context" 
                             :autosize="{ minRows: 5, maxRows: 5}"
                             style="padding:0 10px 0 10px"
                             :disabled="true"
                            >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <div style="padding-left: 30px;">活动总结:</div>
                        <el-input 
                            type="textarea" 
                            v-model="props.row.summary"
                            :autosize="{ minRows: 3, maxRows: 3}"
                             style="padding:0 10px 0 10px"
                            :disabled="true"
                            >
                        </el-input>
                    </el-form-item>
                </el-form>
            </template>
            </el-table-column>
            <el-table-column
            label="申请时间"
            prop="create_time">
            </el-table-column>
            <el-table-column
            label="活动名"
            prop="active_name">
            </el-table-column>
            <el-table-column
            label="状态"
            prop="status">
                <template slot-scope="scope">
                    <el-tag size="medium" v-show="scope.row.status === '未通过'" type="danger">未通过</el-tag>
                    <el-tag size="medium" v-show="scope.row.status === '已通过'" type="success">已通过</el-tag>
                    <el-tag size="medium" v-show="scope.row.status === '已结束'" >已结束</el-tag>
                </template>
            </el-table-column>
            <el-table-column
            label="申请人"
            prop="active_employee_name">
            </el-table-column>
            <el-table-column
            label="申请人ID"
            prop="active_employee">
            </el-table-column>
            <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClickBy(scope.row)" type="text" size="small">通过</el-button>
                    <el-button @click="handleClickDele(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import myAxios from '@/tools/myAxios';
    import Qs from 'qs';
    export default {
        name:'ActiveProve',
        data() {
            return {
                // 活动审批的列表数据
                tableData: [],
                // 活动查询的form表单数据收集
                formInline:{
                    start_time:'',
                    end_time:'',
                    active_name:'',
                    applicant:''
                },
            }
        },
        mounted(){
            // 获取当前登录管理员下的所有活动信息
            myAxios(
                'http://localhost:8088/admin/getactiveinfobyadmin',
                'get',
                null,
                (data)=>{
                    if(data.length === 0){
                        const h = this.$createElement;
                            this.$notify({
                            title: '提示',
                            message: h('i', { style: 'color: teal'}, '该管理员没有活动!')
                        });
                    }else{
                        this.tableData = data;
                    }
                }
            )
        },
        methods:{
            // 查询按钮(可以根据用户名来模糊查询)
            onSelect() {
                if(this.formInline.start_time !== '' && this.formInline.end_time !== '' || this.formInline.active_name !== '' || this.formInline.applicant !== ''){
                    myAxios(
                        'http://localhost:8088/employee/getallactiveinfobyitem',
                        'post',
                        Qs.stringify(this.formInline),
                        (data)=>{
                            if(data.length != 0){
                                this.tableData = data;
                                // 提示一下
                                this.$message({
                                    message: '查询成功!',
                                    type: 'success'
                                });
                            }else{
                                // 提示一下
                                this.$message({
                                    message: '查询结果为空!',
                                    type: 'warning'
                                });
                                this.formInline.start_time = '';
                                this.formInline.end_time = '';
                                this.formInline.active_name = '';
                                this.formInline.applicant = '';
                            }
                        }
                    );
                }else{
                    this.$notify({
                    title: '警告',
                    message: '请输入正确的条件后再来查询!',
                    type: 'warning'
                    });
                }
            },
            // 重置按钮
            onRest(){
                window.location.reload();
            },
            // 通过
            handleClickBy(row){
                if(row.status === '已通过'){
                    // 提示一下
                    this.$message({
                        message: '该活动已通过!',
                        type: 'warning'
                    });
                }else{myAxios(
                    'http://localhost:8088/admin/activeby?id='+row.id,
                    'get',
                    null,
                    (data)=>{
                        // 提示一下
                        this.$message({
                            message: '审批通过!',
                            type: 'success'
                        });
                        row.status = '已通过';
                    }
                )}
            },
            // 删除
            handleClickDele(row){
                myAxios(
                    'http://localhost:8088/admin/activedelete?id='+row.id,
                    'get',
                    null,
                    (data)=>{
                        // 提示一下
                        this.$message({
                            message: '删除成功!',
                            type: 'success'
                        });
                        this.tableData = this.tableData.filter(el => el.id !== row.id); 
                    }
                )
            }
        }
    }
</script>

<style lang="less" scoped>
.el-divider--horizontal {
    margin-top: 0;
}

</style>